<div class="modal-wrp">

  <div class="pager">

    <button
      mat-icon-button
      type="button"
      matTooltip="Previous snippet"
      class="text-muted"
      (click)="previous()">
      <mat-icon>chevron_left</mat-icon>
    </button>

    <button
      mat-icon-button
      type="button"
      matTooltip="Next snippet"
      class="text-muted"
      (click)="next()">
      <mat-icon>chevron_right</mat-icon>
    </button>

  </div>

  <h3 mat-dialog-title class="mb-0">
    {{data.prompt ? 'Edit training snippet' : 'New training snippet'}}
  </h3>

  <form (ngSubmit)="save()">
    <div mat-dialog-content>

      <p class="text-muted text-small mb-3">
        {{data.uri}}
      </p>

      <div class="row">

        <!-- Prompt -->
        <div class="col-lg-6 col-12 pe-lg-0">

          <mat-form-field class="w-100 standalone-field me-2">
            <span
              matPrefix
              matTooltip="Prompt"
              class="d-flex flex-nowrap align-items-center justify-content-between me-2">
              <mat-icon>help_outline</mat-icon>
              <span class="text-muted">|</span>
            </span>
            <input
              matInput
              cdkFocusInitial
              placeholder="Prompt"
              [(ngModel)]="prompt"
              name="prompt"
              autocomplete="off">
          </mat-form-field>

        </div>
        <!-- /Prompt -->

        <!-- URI -->
        <div class="col-lg-3 col-12 ps-lg-1 pe-lg-0">

          <mat-form-field class="w-100 standalone-field me-2">
            <span
              matPrefix
              matTooltip="URI"
              class="d-flex flex-nowrap align-items-center justify-content-between me-2">
              <mat-icon>http</mat-icon>
              <span class="text-muted">|</span>
            </span>
            <input
              matInput
              cdkFocusInitial
              placeholder="URI"
              [(ngModel)]="uri"
              name="uri"
              autocomplete="off">
          </mat-form-field>

        </div>
        <!-- /URI -->

        <!-- Type -->
        <div class="col-lg-3 col-12 ps-lg-1">

          <mat-form-field class="w-100 standalone-field">
            <span
              matPrefix
              matTooltip="Type of snippet"
              class="d-flex flex-nowrap align-items-center justify-content-between me-2 pe-2 min-width">
              <mat-icon>list</mat-icon>
              <span class="text-muted">|</span>
            </span>
            <mat-select
              [(ngModel)]="type"
              placeholder="Type of snippet"
              [disabled]="data?.prompt"
              (selectionChange)="typeChanged()"
              name="type">
              <mat-option
                *ngFor="let idx of types"
                [value]="idx">{{idx}}</mat-option>
            </mat-select>
          </mat-form-field>

        </div>
        <!-- /Type -->

      </div>

      <!-- CodeMirror editor in case data is Hyperlambda -->
      <div class="col-12" *ngIf="ready">

        <app-codemirror-hyperlambda
          [(model)]="model">
        </app-codemirror-hyperlambda>

      </div>

      <!-- Any other types of content besides Hyperlambda -->
      <div class="col-12 mb-0" *ngIf="!ready && !preview">

        <mat-form-field class="w-100 custom-alignment">
          <span
            matPrefix
            matTooltip="Completion for prompt"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>featured_play_list</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <textarea
            matInput
            name="txt_completion"
            placeholder="Completion"
            [(ngModel)]="completion"
            rows="21">
          </textarea>
        </mat-form-field>

      </div>

      <!-- Preview of text content transformed as Markdown instead of textarea -->
      <div class="col-12 mb-4 mt-2" *ngIf="!ready && preview">
        <mat-card class="markdown-preview" [innerHTML]="completion | marked"></mat-card>
      </div>

    </div>

    <div mat-dialog-actions [align]="'end'">

      <mat-slide-toggle
        labelPosition="before"
        class="me-2"
        name="preview"
        (change)="previewChanged()"
        [(ngModel)]="preview">
        Preview
      </mat-slide-toggle>

      <mat-checkbox
        [(ngModel)]="cached"
        name="cached"
        class="me-2"
        labelPosition="before"
        color="primary">Cached</mat-checkbox>

      <mat-checkbox
        [(ngModel)]="pushed"
        name="pushed"
        class="me-2"
        labelPosition="before"
        color="primary">Pushed</mat-checkbox>

      <button
        mat-button
        mat-dialog-close>
        Close
      </button>

      <button
        mat-flat-button
        color="primary"
        type="submit">
        Save
      </button>

    </div>

  </form>
</div>
